// src/pages/HandlingProgressList/index.tsx
import React, { useEffect, useState } from 'react';
import { Table, Card, Typography, Space, message } from 'antd';
import { LockOutlined, BuildOutlined, LinkOutlined, CheckCircleOutlined, CommentOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { productInfos } from '@/services/apis/serviceProviderRegister';
import { companyCheckProgress } from '@/services/apis/companyRegister';
import { render } from '@testing-library/react';
import dayjs from 'dayjs';
const statusEnum:any = {
  pending: "待审核",
  approved: "已审核",
  rejected: "已拒绝",
  returned:"已退回"
}
const HandlingProgressList: React.FC = () => {
  const [dataSource, setDataSource]= useState<any[]>([]);
  const [pagination, setPagination] = useState<{ current: number, pageSize: number, total: number }>({
      current: 1,
      pageSize: 10,
      total: 0
    })
    const { initialState, setInitialState } = useModel('@@initialState');

  useEffect(() => {
    searchUsers({ current: pagination.current, size: pagination.pageSize })
  },[])

  const searchUsers = (values: {current:number, size:number}) => {
    companyCheckProgress({...values, id: (initialState?.currentUser as any).data.id} as any).then(res => {
      const { code, data } = res
      if (code == "0") {
        setDataSource(data)
        setPagination({
          current: data.current,
          pageSize: data.size,
          total: data.total
        })
        //message.success("请求成功")
      }
    })
  }

  const usersPageOnchange = (current: any, pageSize: any) => {
    searchUsers({ current, size: pageSize })
  }
  // 列表列配置（对应五个固定字段，添加图标增强可读性）
  const columns = [
    {
      title: (
        <Space align="center">
          <LockOutlined />
          <span>时间</span>
        </Space>
      ),
      dataIndex: 'createdTime',
      key: 'createdTime',
      width: "20%",
      align: 'center',
      ellipsis:true,
      render:(text:string) => <>{dayjs(text).format("YYYY-MM-DD HH:mm:ss.SSS")}</>
    },
    {
      title: (
        <Space align="center">
          <BuildOutlined />
          <span>单位</span>
        </Space>
      ),
      dataIndex: 'departmentName',
      key: 'departmentName',
      width: "20%",
      align: 'center',
      ellipsis:true,
    },
    {
      title: (
        <Space align="center">
          <LinkOutlined />
          <span>环节</span>
        </Space>
      ),
      dataIndex: 'link',
      key: 'link',
      width: "10%",
      align: 'center',
      ellipsis:true,
    },
    {
      title: (
        <Space align="center">
          <CheckCircleOutlined />
          <span>结果</span>
        </Space>
      ),
      dataIndex: "auditStatus",
      key: 'auditStatus',
      width: "20%",
      align: 'center',
      ellipsis:true,
      // render:(text:any) => <span>{statusEnum[text]}</span>
    },
    {
      title: (
        <Space align="center">
          <CommentOutlined />
          <span>意见</span>
        </Space>
      ),
      dataIndex: 'auditRemark',
      key: 'auditRemark',
      // flex: 1, // 自适应剩余宽度，避免意见过长挤压
      ellipsis:true,
      width:"30%"
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      {/* 页面标题 */}
           <div
        style={{
          fontSize: 16,
          fontWeight: 500,
          color: '#1f2937',
          marginBottom: 12,
        }}
      >办理进度</div>

      {/* 办理进度列表卡片 */}
     <Card
             style={{
               // margin: '16px',
               borderRadius: 12,
               boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
               height: 'calc(100vh - 120px)', // 精确高度，保证内部滚动
               overflowY: 'auto', // 内部滚动
               padding: '24px',
             }}
           >
        <Table
          columns={columns as any}
          dataSource={dataSource}
          rowKey="id"
          pagination={{
            pageSize: pagination.pageSize,
            current: pagination.current, total: pagination.total, showSizeChanger: true,
            onChange: usersPageOnchange
          }}
          scroll={{ x: 800 }} // 横向滚动适配小屏幕
          locale={{ emptyText: '暂无办理进度记录' }}
          // 鼠标悬浮行高亮，增强交互体验
          rowClassName={() => 'hover:bg-gray-50'}
        />
      </Card>
    </div>
  );
};

export default HandlingProgressList;